<script setup lang="ts">
import { ref } from 'vue'
import { payOrderApi } from '@/services/order'
import {
  closeToast,
  showConfirmDialog,
  showLoadingToast,
  showToast
} from 'vant'
const props = withDefaults(
  defineProps<{
    showAction: boolean
    price?: number
    orderId?: string
    payCallback:
      | 'http://localhost:5173/room'
      | 'http://localhost:5173/order/pay/result'
  }>(),
  {
    showAction: false,
    orderId: '',
    payCallback: 'http://localhost:5173/order/pay/result'
  }
)
const emit = defineEmits<{
  (e: 'cancelPay'): void
}>()

const payMethod = ref<0 | 1>()

const cancalPay = () => {
  showConfirmDialog({
    title: '温馨提示',
    message: '是否确认取消订单',
    cancelButtonText: '仍要关闭',
    confirmButtonText: '继续支付'
  })
    .then(() => {
      return false
    })
    .catch(() => {
      emit('cancelPay')
      return true
    })
}

const onPayOrder = async () => {
  if (!payMethod.value) return showToast('请选择支付方式')
  const payOrderParams = {
    orderId: props.orderId,
    payCallback: props.payCallback,
    paymentMethod: payMethod.value
  }
  try {
    showLoadingToast({
      message: '跳转支付',
      duration: 0,
      forbidClick: true
    })
    const { data } = await payOrderApi(payOrderParams)
    location.href = data.payUrl
  } catch (error) {
    console.log(error)
  } finally {
    closeToast()
  }
}
</script>

<template>
  <div class="cp-pay-action">
    <van-action-sheet
      :show="props.showAction"
      @update:show="(val) => $emit('update:showAction', val)"
      title="选择支付方式"
      :close-on-popstate="false"
      :closeable="false"
      :before-close="cancalPay"
    >
      <div class="pay-type">
        <p class="amount">￥{{ price }}</p>
        <van-cell-group>
          <van-cell title="微信支付">
            <template #icon><cp-icon name="consult-wechat" /></template>
            <template #extra>
              <van-checkbox-group @click="payMethod = 0">
                <van-checkbox :checked="payMethod === 0" />
              </van-checkbox-group>
            </template>
          </van-cell>
          <van-cell title="支付宝支付">
            <template #icon><cp-icon name="consult-alipay" /></template>
            <template #extra>
              <van-checkbox-group @click="payMethod = 1">
                <van-checkbox :checked="payMethod === 1" />
              </van-checkbox-group>
            </template>
          </van-cell>
        </van-cell-group>
        <div class="btn">
          <van-button type="primary" round block @click="onPayOrder">
            立即支付
          </van-button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<style scoped lang="scss">
.cp-pay-action {
  .pay-type {
    .amount {
      padding: 20px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
    .btn {
      padding: 15px;
    }
    .van-cell {
      align-items: center;
      .cp-icon {
        margin-right: 10px;
        font-size: 18px;
      }
      .van-checkbox :deep(.van-checkbox__icon) {
        font-size: 16px;
      }
    }
  }
}
</style>
